/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-05-09 16:50:02
 * @LastEditTime : 2023-07-17 16:42:03
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Pages\Front\Assets\Template\QualityScore.jsx
 * @Description  :
 */
import './Scss/QualityScore.scss'
import dayjs from 'dayjs'
import { Pie } from '@ant-design/plots'
import { useState, useEffect } from 'react'
import { useRequest } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { message } from 'antd'
import { TitleSmall001 } from '../Common/SmallTitle'
import { WebTemplateUrl } from './configuration'
import { FrontModalBox } from '../Modal'

const { hostname } = window.location

const http = ['yangpu.ljkjkf.com']

export const QualityScore001 = ({ clear }) => {
    const [OptionsCall, setOptionsCall] = useState()
    const [messageApi, contextHolder] = message.useMessage()
    const [OneData, setOneData] = useState([])
    const [TwoData, setTwoData] = useState()
    const [ThrData, setThrData] = useState([])
    const [ChartsStateOne, setChartsStateOne] = useState()
    const [LabList, setLabList] = useState()

    useEffect(() => {
        const cfgOne = {
            appendPadding: 10,
            autoFit: false,
            width: 150,
            height: 150,
            data: OneData,
            angleField: 'value',
            colorField: 'type',
            radius: 1,
            legend: false,
            color: ['#62D4E6', '#77C3FF', '#FEB891'],
            pieStyle: { stroke: 'block' },
            label: null,
            interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
        }
        setChartsStateOne(cfgOne)
    }, [ThrData, OneData])

    const { runAsync: getJSZXQualityStat } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const { scores, labList, nonQualifiedPercent, qualifiedPercent, nonQualifiedCount, totalCount } = res
            setTwoData({ nonQualifiedCount, totalCount })
            const lab_self = scores.find(v => v.labCode === 'lab_self').score || 100
            const lab_sampling = scores.find(v => v.labCode === 'lab_sampling').score || 100
            const lab_dsf = scores.find(v => v.labCode === 'lab_dsf').score || 100
            setLabList(labList)
            setOneData([
                { type: `自检${http.includes(hostname) ? '合格率' : '评分'}`, value: lab_self, color: '#62D4E6' },
                { type: `抽检${http.includes(hostname) ? '合格率' : '评分'}`, value: lab_sampling, color: '#77C3FF' },
                !clear && {
                    type: `第三方${http.includes(hostname) ? '合格率' : '评分'}`,
                    value: lab_dsf,
                    color: '#FEB891',
                },
            ])
            setThrData([
                { type: '不合格', value: nonQualifiedPercent, color: '#C75212' },
                { type: '合格', value: qualifiedPercent, color: '#12C79A' },
            ])
        },
    })

    useEffect(() => {
        getJSZXQualityStat({ url: 'getJSZXQualityStat' })
    }, [getJSZXQualityStat])

    return (
        <div className="QualityScore001">
            {contextHolder}
            <TitleSmall001 title="质量预警" />
            <div className="QualityScore001Box">
                <div>
                    {ChartsStateOne && <Pie {...ChartsStateOne} />}
                    <div>
                        {OneData.map(({ type, value, color }, index) => (
                            <div
                                key={index}
                                onClick={() => {
                                    setOptionsCall({
                                        type: 'TableList',
                                        data: { title: '质量预警列表', type: 'QualityStatDetail' },
                                    })
                                }}
                            >
                                <div style={{ color }}>{type}</div>
                                <div>{value} </div>
                            </div>
                        ))}
                    </div>
                </div>

                <div
                    onClick={() => {
                        if (TwoData?.nonQualifiedCount === 0) {
                            messageApi.info('暂无报警数据')
                            return false
                        }
                        setOptionsCall({
                            type: 'TableTest',
                            data: {
                                title: '试验数据列表',
                                LabList,
                                result: 1,
                                startDate: dayjs().format('YYYY-MM') + '-01',
                            },
                        })
                    }}
                >
                    <img src={WebTemplateUrl + 'Lab警告.png'} alt="" />
                    <div>告警信息</div>
                    <div>{TwoData?.nonQualifiedCount}</div>
                </div>
            </div>
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}
